<template>
  <div class="main"
       ref="bigbox">
    <div class="serbox">
      <el-date-picker v-model="choDate"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"></el-date-picker>
      <div class="inp">
        <el-input placeholder="请输入订单编号"
                  suffix-icon="el-icon-search"
                  v-model="searchText">
        </el-input>
      </div>
      <el-button type="primary"
                 style="margin-left:15px"
                 size="medium"
                 @click="search">查询</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData"
                stripe
                style="width: 100%">
        <el-table-column type="index"
                         label="序号">
        </el-table-column>
        <el-table-column prop="orderSn"
                         label="订单编号">
        </el-table-column>
        <el-table-column label="商品图片">
          <template slot-scope="scope">
            <img :src="scope.row.imgurl"
                 class="img">
          </template>
        </el-table-column>
        <el-table-column prop="goodsName"
                         label="商品名称">
        </el-table-column>
        <el-table-column prop="specName"
                         label="规格">
        </el-table-column>
        <el-table-column prop="price"
                         label="单价">
        </el-table-column>
        <el-table-column prop="total"
                         label="数量">
        </el-table-column>
        <el-table-column prop="createAt"
                         label="下单时间">
        </el-table-column>
        <el-table-column label="扣除优惠">
          <template slot-scope="scope">
            <span>￥{{scope.row.couponMoney}}</span>
          </template>
        </el-table-column>
        <el-table-column label="到账金额">
          <template slot-scope="scope">
            <span style="color:#D94511">￥{{scope.row.payment}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作"
                         width="60">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)"
                       type="text"
                       size="small">详情</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <div class="page">
      <div class="btns">
      </div>
      <el-pagination background
                     @current-change="changePage"
                     :current-page.sync="page"
                     :page-size="pageSize"
                     layout="total,prev,pager,next,jumper"
                     :total="total">
      </el-pagination>
    </div>
    <!-- 弹框 -->
    <el-dialog title="开票详情"
               :visible.sync="pop"
               width="50%">
      <el-form label-width="80px"
               :model="popform">
        <el-form-item label="订单编号">
          <el-input v-model="popform.orderSn"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="商品图片">
          <img :src="popform.img"
               class="popimg">
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="popform.name"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="规格">
          <el-input v-model="popform.spec"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="扣除优惠">
          <el-input v-model="popform.discounts"
                    disabled></el-input>
        </el-form-item>
        <el-form-item label="到账金额">
          <el-input v-model="popform.money"
                    disabled></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data () {
    return {
      choDate: "",
      searchText: "",
      tableData: [],
      page: 1,
      pageSize: 10,
      total: 0,
      pop: false,
      popform: {
        orderSn: "12345678910",
        img: require("../../assets/img/tu.png"),
        name: '商品名称',
        spec: "规格参数",
        discounts: "152.00",
        money: "52.00"
      }
    }
  },
  mounted () {
    this.getlist();
  },
  methods: {
    getlist () {
      this.$postRequest("/mall/orderOrder/list", {
        shopId: sessionStorage.getItem("shopId"),
        orderSn: this.searchText,
        status: 0,
        beginAt: this.choDate[0],
        endAt: this.choDate[1],
        pageNum: this.page,
        pageSize: this.pageSize
      }).then(res => {
        this.total = res.total;
        this.tableData = res.rows;
        for (var i = 0; i < res.rows.length; i++) {
          res.rows[i].createAt = this.$util.gettime(new Date(res.rows[i].createAt));
        }
      })
    },
    search () {
      if (this.choDate == null) {
        this.choDate = ["", ""]
      }
      this.getlist();
    },
    changePage (e) {
      this.$refs.bigbox.parentElement.scrollTo(0, 0);
      this.getlist();
    },
    handleClick () {
      this.pop = true
    }
  }

}
</script>

<style lang="scss" scoped>
/deep/ .el-table th > .cell,
/deep/ .el-table .cell {
  text-align: center;
}
/deep/ .el-button--primary {
  background-color: #0655ce;
  border-color: #0655ce;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #0655ce;
  border-color: #0655ce;
}
/deep/ .el-button--text {
  color: #0655ce;
}
/deep/ .el-input.is-disabled .el-input__inner {
  color: #333;
}
.main {
  margin: 20px;
  background: #fff;
}
.serbox {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #eee;
  .inp {
    width: 200px;
    margin-left: 20px;
  }
}
.table {
  margin: 20px;
  border: 1px solid #eee;
  .img {
    height: 50px;
    width: 50px;
  }
}
.page {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}
.popimg {
  height: 120px;
  width: 120px;
}
</style>